<template>
  <div class="tl pd_20" v-loading="load">
    <div class="bor add_con_item bg_write mar_bottom_25" style="padding: 17px 15px 80px 15px;">
      <h5>基本信息</h5>
      <el-form :label-position="labelPosition" label-width="90px" ref="formLabelAlign">
        <el-form-item label="标题：" label-width="100px">
          <el-col :span="5">
            <el-input v-model="shopInfo.title"></el-input>
          </el-col>
          <el-col class="tc" :span="2">发起方：</el-col>
          <el-col :span="5">
            <el-input v-model="shopInfo.initiator"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动时间：" label-width="100px">

          <div style="margin: 0 0 10xp 0" v-for="(item, i) in datatime" :key="i" class="distribution">
            <el-col :span="3">
              {{item.time | getTimeFormat}}
            </el-col>
          </div>

          <el-col :span="10">
            <el-button type="primary" @click="show_time = true">设置时间</el-button>
            <!-- <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker> -->
          </el-col>
        </el-form-item>
        <el-form-item label="所在省市区：" label-width="100px" prop="province">
          <el-col :span="24">
            <el-col :span="12">
              <city-cascader ref="checkAll" size="large" :placeholder="plad" :level="3" @change="handleChange" />
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="详细地址：" label-width="100px">
          <el-col :span="12">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="shopInfo.add" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="经纬度：" label-width="100px">
          <el-col :span="12">
            <el-input placeholder v-model="JWD" clearable>
              <template slot="append">
                <a target="_blank" :href="'https://lbs.qq.com/tool/getpoint/index.html'">
                  <el-button :loading="$store.state.isLoading" size="mini">查看经纬度</el-button>
                </a>
              </template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="天数：" label-width="100px">
          <el-col :span="4">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="shopInfo.day" autocomplete="off"></el-input>
          </el-col>
          <el-col class="tc" :span="2">人数：</el-col>
          <el-col :span="4">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="shopInfo.people" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="金额：" label-width="100px">
          <el-col :span="4">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="shopInfo.money" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>

        <div>
          <el-form-item label="图片:" prop="piclink">
            <el-form :label-position="labelPosition" ref="uploadElement" label-width="120px" :model="shopInfo">
              <el-col :span="24" class="mar_bottom_20">
                <el-col :span="24" class="add_prod_img">
                  <ul class="el-upload-list el-upload-list--picture-card" v-if="fileList && fileList.length > 0">
                    <li class="el-upload-list__item is-success zu" v-for="(item, index) in fileList" :key="index + Math.random()">
                      <img :src="$fnc.getImgUrl(item.url)" alt class="el-upload-list__item-thumbnail" />
                      <a class="el-upload-list__item-name">
                        <i class="el-icon-document"></i>
                      </a>
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview">
                          <i @click="detailsImg(item)" class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete">
                          <i @click="deleteImg(item, index)" class="el-icon-delete"></i>
                        </span>
                        <!-- <span class="el-upload-list__item-delete">
                    <i @click="setZhutu(item, index)" class="fmt">设置列表图</i>
                  </span> -->
                      </span>
                      <!-- <p v-if="item.isZhu == true" style="color: red">列表图</p> -->
                      <el-progress v-if="item.imgPercent < 100" class="video_jindu_shop" type="circle" :percentage="item.imgPercent"></el-progress>
                      <!-- <div class="sel_img_btn">
                  <div class="sel_img_left" @click="pre_img_btn('left', item, index)">
                    <i class="el-icon-caret-left"></i>
                  </div>
                  <div class="sel_img_right" @click="pre_img_btn('right', item, index)">
                    <i class="el-icon-caret-right"></i>
                  </div>
                </div> -->
                    </li>
                  </ul>
                  <span>
                    <uploadpic :shop_list="fileList" :width="150" :height="150" :real_width="640" :real_height="640" :is_more="true" :is_shop="true" :is_tip="false" @send_pic="onSuccess_shop"></uploadpic>
                    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
                      <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt />
                    </el-dialog>
                  </span>
                </el-col>
              </el-col>
            </el-form>
          </el-form-item>
        </div>

        <el-form-item label="简介：" label-width="100px">
          <el-col :span="10">
            <el-input type="textarea" :rows="6" clearable placeholder="请输入简介" v-model="shopInfo.introduction" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <div style="overflow: hidden">
          <el-form-item label="详情：" label-width="100px">
            <el-row type="flex" :gutter="15" style="justify-content: center">
              <div :span="6" style="padding-right: 30px">
                <div id="diy-phone">
                  <div class="diy-phone-header">
                    <i class="diy-phone-receiver"></i>
                    <div class="diy-phone-title j-pagetitle"></div>
                  </div>
                  <div class="diy-phone-contain" id="j-materialPrev">
                    <dl class="mgt20">
                      <dt>
                        <div class="single-summary shop-content-box" v-html="shopInfo.content"></div>
                      </dt>
                    </dl>
                  </div>
                  <i class="diy-phone-footer"></i>
                </div>
              </div>
              <div :span="12" style="margin-top: 40px">
                <ue v-model="shopInfo.content" v-loading="loadding1" v-if="!loadding1" :value="shopInfo.content" style="width: 375px" upload-url="/api/common/upload/index/" fileName="file" />
                <!-- <editor
            v-show="!shopdetail_type "
            class="editor"
            :config="config"
            v-model="shopInfo.content"
            upload-url="/api/common/upload/index/"
            fileName="file"
          />-->
              </div>
            </el-row>
          </el-form-item>
        </div>
        <!-- <el-form-item label="详情：" label-width="100px" >
          <el-col :span="12">
            <el-input
               type="textarea"
              :rows="6"
              clearable
              placeholder="请输入详情"
              v-model="shopInfo.content"
              autocomplete="off"
            ></el-input>
          <ue v-model="shopInfo.content" v-loading="loadding1" v-if="!loadding1" :value="shopInfo.content" style="width: 375px" upload-url="/api/common/upload/index/" fileName="file" />

          </el-col>
        </el-form-item> -->
      </el-form>
    </div>

    <el-col :span="22" class="men_add tc">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="addProductItem" @keydown.13="addProductItem">确认保存添加产品</el-button>
      </el-card>
    </el-col>

    <el-dialog title="编辑时间" :visible.sync="show_time" width="800px" class="tl size_13" :close-on-click-modal="false">
      <el-form label-position="100px">
        <el-form-item style="margin: 0 0 10xp 0" v-for="(item, i) in datatime" :key="i" class="distribution">
          <el-col :span="3" class="tr" style="padding: 0 12px 0 0">
            时间：
          </el-col>
          <el-col :span="7">
            <el-date-picker v-model="item.time" type="datetime" size="small" value-format="timestamp" placeholder="选择日期时间">
            </el-date-picker>
          </el-col>
          <el-col :span="6" style="padding: 0 0 0 16px">
            <el-button :loading="$store.state.isLoading" type="danger" icon="el-icon-delete" @click="delItem(i, item)" size="small">删除</el-button>
          </el-col>
        </el-form-item>

        <div class="tc" style="margin-top: 20px">
          <el-button :loading="$store.state.isLoading" type="warning" size="small" @click="addItem">
            添 加
          </el-button>
          <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="saveall_distribution">
            全部保存
          </el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import axios from "axios";
import uploadpic from "@/components/page/pic/up_pic";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import ue from "@/components/currency/Ue/ue.vue";
export default {
  data() {
    return {
      datatime: [],
      JWD: "",
      shopInfo: {
        title: "",
        initiator: "",
        select_date: "",
        people: "",
        day: "",
        money: "",
        province: "",
        city: "",
        area: "",
        town: "",
        add: "",
        longitude: "",
        latitude: "",
        piclink: "",
        content: "",
        introduction: "",
      },
      show_time: false,
      n_arr: [],
      labelPosition: "right",
      plad: "",
      loadding1: true,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    onSuccess_shop(shop_list) {
      this.fileList = this.fileList.concat(shop_list);
      console.log(this.fileList);
    },
    pre_img_btn(fx, item, index) {
      if (fx == "left") {
        this.upGo(this.fileList, index);
      } else {
        this.downGo(this.fileList, index);
      }
    },
    setZhutu(item, index) {
      for (var i in this.fileList) {
        if (index == i) {
          this.fileList[i].isZhu = true;
        } else {
          this.fileList[i].isZhu = false;
        }
      }
      this.fileList.splice();

      // if (item.id == undefined && item.response == undefined) return false;
      // if (item.id == undefined) {
      //   this.shopInfo.piclink = item.response.result;
      // } else {
      //   this.shopInfo.piclink = item.url;
      // }
    },
    detailsImg(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.url;
    },
    delItem(i, item) {
      this.datatime.splice(i, 1);
    },
    deleteImg(item, index) {
      var _this = this;

      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          _this.$message.success("删除成功");
          _this.fileList.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    saveall_distribution() {
      var flag = true;
      var params = {};
      this.n_arr = [];
      this.datatime.forEach((item, i) => {
        console.log(!item.account, item.reward);
        if (!item.time) {
          flag = false;
        }
        // this.n_arr.push({
        //   id: item.id || 0,
        //   time: this.$fnc.phptime(item.time),
        // });
        this.n_arr.push(this.$fnc.phptime(item.time));
      });
      if (flag == false) {
        this.$fnc.alertError("请完善信息");
      } else {
        this.show_time = false;
        this.$fnc.alertSuccess({ text: "保存成功" });
      }
    },
    addItem() {
      this.datatime.push({
        time: "",
      });
    },
    onSuccess(pic) {
      // 图片
      this.shopInfo.piclink = pic;
    },
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.shopInfo.province = value[i];
          if (i == 1) this.shopInfo.city = value[i];
          if (i == 2) this.shopInfo.area = value[i];
          if (i == 3) this.shopInfo.town = value[i];
        }
      }
    },

    addProductItem() {
      var JWD = this.JWD;
      var jwd_ar = JWD.split(",");
      let arr = [];
      if (this.$route.query.id) {
        this.shopInfo.longitude = jwd_ar[1]; //经度
        this.shopInfo.latitude = jwd_ar[0];
        this.shopInfo.select_date = this.n_arr.join("@");
        for (let i in this.fileList) {
          arr.push(this.fileList[i].url);
        }
        this.shopInfo.piclink = arr.join("@");
        this.$api.getPage
          .edit_activity_list(this.shopInfo)
          .then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({
                text: "修改成功",
              });
              this.$router.push('/index/page/activity_list')
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
            }
          });
      } else {
        this.shopInfo.longitude = jwd_ar[1]; //经度
        this.shopInfo.latitude = jwd_ar[0]; //纬度
        this.shopInfo.select_date = this.n_arr.join("@");
        for (let i in this.fileList) {
          arr.push(this.fileList[i].url);
        }
        this.shopInfo.piclink = arr.join("@");
        this.$api.getPage
          .add_activity_list(this.shopInfo)
          .then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({
                text: "添加成功",
              });
              this.$router.push('/index/page/activity_list')
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
            }
          });
      }
      this.load = false;
    },

    getdetail() {
      if (this.$route.query.id) {
        this.$api.getPage
          .single_activity_list({ id: this.$route.query.id })
          .then((res) => {
            if (res.data.code == 200) {
              this.shopInfo = res.data.result;
              let arr = res.data.result.select_date.split("@");
              for (let i in arr) {
                this.datatime.push({
                  time: this.$fnc.vuetime(arr[i]),
                });
              }
              let brr = [];
              brr = this.shopInfo.piclink.split("@");
              for (let i in brr) {
                this.fileList.push({
                  url: brr[i],
                });
              }

              this.n_arr = arr;
              this.JWD = this.shopInfo.latitude + "," + this.shopInfo.longitude;
              let selectedOptions = [
                this.shopInfo.province,
                this.shopInfo.city,
                this.shopInfo.area,
                this.shopInfo.town,
              ];
              this.shopInfo.money = parseFloat(this.shopInfo.money).toFixed(2);
              this.plad = selectedOptions.join("-");
              console.log("52525252", arr);
              this.loadding1 = false;
            }
          });
      }
    },
  },

  components: {
    cityCascader,
    uploadpic,
    ue,
  },
  beforeCreate() {
    this.load = true;
  },
  created() {
    this.loadding1 = false;
    // console.log(this.shopInfo)
  },
  mounted() {
    this.getdetail();
    this.load = false;
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.tag {
  width: 148px;
  color: #fff;
  margin-bottom: 1rem;
  background: #4ca9ff;
  text-align: center;
  border-radius: 3px;
}
.checkFirst {
  margin-left: 1.875rem;
}
.head_color {
  background: #333;
}
.fade-enter-active,
.fade-leave-active {
  transition: height 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
.childTabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
// 截图
.cropper-content {
  .cropper {
    width: auto;
    height: 800px;
  }
}
.materialPrePanel {
  max-height: 468px;
  overflow: auto;
}
.sel_img_btn {
  /* position: absolute; */
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
}
.zu:hover .sel_img_btn {
  visibility: visible;
  cursor: pointer;
}
.sel_img_left {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sel_img_right {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.sel_img_btn i {
  font-size: 22px;
  color: #ffffff;
}
.sel_img_left:hover .sel_img_right:hover {
  cursor: pointer;
}

.lswm_tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  margin: 10px 10px 5px 0;
}
</style>
